
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>图片放大缩小</title>
<style type="text/css">
	*{margin:0px;padding:0px;}
	#oDiv{background:red;width:367px;height:367px;margin:50px auto 0;}
	#oDiv ul{list-style:none;background:rgba(200,200,200,.5);position:relative;height:100%;}
	#oDiv ul li{width:100px;height:100px;border:1px solid #ccc;margin:10px;float:left;filter:alpha(opacity=100);opacity:1;z-index:2;}
	#oDiv ul li img{width:100%;height:100%;}
</style>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById("oDiv");
		var oLis = oDiv.getElementsByTagName("li");
		var oUl = oDiv.getElementsByTagName("ul")[0];
		var i;
		var zIndex=2;
		for(i=0; i < oLis.length; i++){
			oLis[i].style.left = oLis[i].offsetLeft+"px";
			oLis[i].style.top = oLis[i].offsetTop+"px";
			oLis[i].onmouseover = function(){
				zIndex=zIndex+1;
				this.style.zIndex=zIndex;
				startMove(this,{marginLeft: -50, marginTop: -50, width: 200,height: 200});
			}
			oLis[i].onmouseout = function(){
				startMove(this,{marginLeft: 0, marginTop: 0, width: 100,height: 100});
			}
		}
		for(i=0; i < oLis.length; i++){
			oLis[i].style.position = "absolute";
			oLis[i].style.margin = "0px";
		}
	}
</script>
</head>
<body>
	<div id="oDiv">
		<ul>
			<li><img src="images/test1.png"></li>
			<li><img src="images/test2.png"></li>
			<li><img src="images/test3.png"></li>
			<li><img src="images/test4.png"></li>
			<li><img src="images/test5.png"></li>
			<li><img src="images/test6.png"></li>
			<li><img src="images/test7.png"></li>
			<li><img src="images/test8.png"></li>
			<li><img src="images/test9.png"></li>
		</ul>
	</div>
</body>
</html>